<template>
    <div class="test1" style="width:400px;height:300px;">
        <div id="myChart1" style="width:100%;height:300px;float:left;"></div>
    </div>
</template>

<script>

export default {
  name: "shuLiang",
  data () {
    return {
      myChart1: '',
      opinion: ['基金一', '基金二','基金三'],
      opinionData: [
        { value: 85},
        { value: 15},
        { value: 50},
      ]
    }
  },
  props: {
    fund: []
  },
  watch:{
    fund(res){
      this.drawLine4(res);
    }
  },
  // mounted: function () {
  //   this.drawLine4()
  // },
  methods: {
    drawLine4 (res) {
      console.log("shuliang子组件接收：" + res[0].fundValue)
      for (var i = 0; i < 3; i++) {
        this.opinionData[i].value = res[i].fundValue
      }
      this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      this.myChart1.setOption({
        title: {
          text: '投入实验点',
          x:'center',
          y:10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        // legend: {
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'top',
        //   data: ['基金']
        // },
        xAxis: {
          data: this.opinion
        },
        yAxis: {},
        series: [{
          name: '基金',
          type: 'bar',
          barWidth:'40',
          data: this.opinionData,
          // 条形图上方显示数据
          label:{
            show:true,
            position:'top',
            textStyle:{
              // color:'#000',
              fontSize:16,
              fontWeight:600
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            color: function (params) {
              // 自定义颜色
              var colorList = ['#1ab394', 'yellowgreen','#0099FC']
              return colorList[params.dataIndex]
            },
          }
        }]
      })
    }
  }
}
</script>
